<template>
  <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="100px" size="medium" class="role-form">
    <el-form-item label="角色名称" prop="roleName">
      <el-input
        v-model="roleForm.roleName"
        autocomplete="off"
        :maxlength="100"
        show-word-limit
        clearable
        placeholder="请输入角色名称"
        :disabled="type !== 'add'"></el-input>
    </el-form-item>
    <el-form-item label="角色编码" prop="roleCode">
      <el-input
        v-model="roleForm.roleCode"
        autocomplete="off"
        :maxlength="50"
        :disabled="type !== 'add'"
        show-word-limit
        clearable
        placeholder="请输入角色编码"></el-input>
    </el-form-item>
    <el-form-item label="角色描述" prop="remark">
      <el-input
        v-model="roleForm.remark"
        type="textarea"
        placeholder="请输入角色描述"
        maxlength="200"
        show-word-limit
        :disabled="type !== 'add'"></el-input>
    </el-form-item>
    <el-form-item v-if="type !== 'add'" label="创建时间">
      <div>{{ roleForm.createTime }}</div>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: 'RoleForm',
  components: {},
  emits: ['submit'],
  props: {
    // add-添加，view-预览
    type: {
      type: String,
      default: 'add',
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      roleForm: {
        roleName: '',
        roleCode: '',
        remark: '',
        createTime: '',
      },
      rules: {
        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        roleCode: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
      },
    }
  },
  watch: {
    info: {
      handler(obj) {
        if (obj && obj.id) {
          this.roleForm = {
            ...obj,
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    resetForm() {
      this.$refs.roleForm && this.$refs.roleForm.resetFields()
    },
    submitForm() {
      this.$refs.roleForm.validate(valid => {
        if (valid) {
          this.$emit('submit', this.roleForm)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.role-form {
  .el-form-item {
    max-width: 600px;

    .input {
      width: 100%;
    }
  }
}
</style>
